<script setup lang="ts">
import { NuxtImg } from "#components";
import list from "../../news/config";
</script>

<template>
  <!-- S PC -->
  <div class="w-max-content mx-auto">
    <a
      class="flex mb-16px max-h-427px h-30vw bg-#F2F2F2"
      :href="`/news/${list[0]['id']}`"
    >
      <div class="flex-none w-3/5">
        <img class="w-full h-full object-cover" :src="list[0]?.cover" />
      </div>
      <div class="flex flex-col flex-none w-2/5 pt-3.5vw pb-2vw px-2vw">
        <div class="flex-auto leading-34px font-bold lg:text-2xl">
          {{ list[0].title }}
        </div>
        <div class="flex-none text-lg text-#808080"> {{ list[0].date }}</div>
      </div>
    </a>

    <div class="w-full overflow-hidden">
      <div class="flex flex-wrap -mx-10px">
        <a
          class="flex-none w-1/2 xl:w-1/4 h-335px px-10px"
          v-for="(item, index) in list.slice(1)"
          :key="index"
          :href="`/news/${item.id}`"
        >
          <div class="leading-0">
            <NuxtImg class="w-full h-201px object-cover" :src="item.cover"/>
          </div>

          <div class="bg-#F2F2F2 py-20px px-14px">
            <div class="h-3em text-#242424 line-clamp-2 font-bold">
              {{ item.title }}
            </div>

            <div class="mt-3 text-#808080 text-base">{{ item.date }}</div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- E PC -->
</template>
